<!--
 * @Author: Nic
 * @Date: 2023-02-07 21:00:10
 * @LastEditTime: 2023-02-18 22:35:40
 * @LastEditors: Nic
 * @Description:
 * @FilePath: /mahjong-scorer/src/pages/My/index.vue
-->
<template>
  <div>
    <header pl-10 pt-5 pb-5>
      <p text="4xl left">
        My
      </p>
    </header>
    <div flex justify-center>
      <SvgIcon :name="userInfo.avatarName" w-100px h-100px />
    </div>

    <div text-score text-2xl my-4>
      {{ userInfo.nickName }}
    </div>
    <div flex m-t-5>
      <div w-90vw py-4 px-4 mx-auto bg-white dark:bg-gray-400 dark:bg-opacity-10 rounded-xl shadow-md space-y-2>
        <div text-center space-y-2>
          <div>
            <p text-lg text-left text-black dark:text-white font-semibold mb-2>
              记录
            </p>
            <p text-left text-gray-500 dark:text-gray-300 font-medium>
              History Record
            </p>
          </div>
          <van-grid direction="horizontal" :column-num="3" :border="false">
            <van-grid-item> 总局数 100 </van-grid-item>
            <van-grid-item> 胜率 100% </van-grid-item>
            <van-grid-item> 混吊王 </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
    <div v-if="playerID === '63dfbda5c00f1f296238d8ad'" my-4>
      <!-- <div my-4> -->
      <img src="../../assets/love.gif" alt="" srcset="" w-90vw m-auto>
    </div>
    <button mt-10px btn-main mr-4px @click="onSignOut()">
      退出登录
    </button>
    <div mt-10>
      {{ vTime }}
    </div>

    <!-- <Footer /> -->
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'

const router = useRouter()
let playerID: any = $ref('')
let userInfo: any = $ref({})
let gameList: any = $ref([])
const vTime: any = `发布时间: ${dayjs(window.versionTime).format('YYYY-MM-DD HH:mm:ss')}`
playerID = localStorage.getItem('playerID')

onMounted(async () => {
  userInfo = await useGetUserInfoByPlayerID(playerID)
  console.log('playerID', playerID)
  getProgressGameList(playerID)
})

function getProgressGameList(playerID: string) {
  const query = new AV.Query('ProgressGame')
  query.equalTo('playerID', playerID)
  query.find().then((res: any) => {
    // res 是包含满足条件的 Student 对象的数组
    gameList = res.map((el: any) => el._serverData)
    const obj: any = {
      win: 0,
      fail: 0,
      wins: [],
    }
    gameList.forEach((el: any) => {
      console.log('el', el)
      obj.win += el.win
      obj.fail += el.fail
      let temp = []
      temp = el.wins.Scoring.concat(el.wins.Gang)
      obj.wins = obj.wins.concat(temp)
    })
    console.log('obj', obj)
  })
}
function onSignOut() {
  localStorage.removeItem('playerID')
  router.push('/login')
}
</script>

<route lang="yaml">
meta:
  layout: home
</route>

<style lang="scss" scoped></style>
